<template>
  <div>
    <mt-header title="请登录您的账号">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
    </mt-header>
    <mt-field
      type="text"
      label="用户名"
      placeholder="您的邮箱/手机号"
      :state="nameState"
      v-model="usename"
      @blur.native.capture="myUsename"
    ></mt-field>
    <mt-field
      type="password"
      label="密码"
      placeholder="您的密码"
      :state="passState"
      autocomplete="off"
      v-model="password"
      @blur.native.capture="myPassword"
    ></mt-field>
    <mt-button type="primary" size="large" @click="handle" class="mt-bt1"
      >登录</mt-button
    >
    <router-link to="/register">
      <mt-button type="primary" size="large" class="mt-bt2">快速注册</mt-button>
    </router-link>
  </div>
</template>

<script>
let usenameRegExp = /^[a-zA-Z0-9_]{6,12}$/;
let passwordRegExp = /^[a-zA-Z0-9_]{8,20}$/;
export default {
  name: "login",
  data() {
    return {
      // 用户名初的始值
      usename: "",
      // 密码的初始值
      password: "",
      nameState: "",
      passState: "",
    };
  },
  methods: {
    // 失去焦点时触发校验事件
    // 1.用户名
    myUsename() {
      if (usenameRegExp.test(this.usename)) {
        this.nameState = "success";
      } else {
        this.$toast("用户名不合法");
        this.nameState = "error";
      }
    },
    // 2.密码
    myPassword() {
      if (passwordRegExp.test(this.password)) {
        this.passState = "success";
      } else {
        this.$toast("密码不合法");
        this.passState = "error";
      }
    },
    // 单击按钮时完成用户信息的校验
    handle() {
      // 4,如果都正确了，则将相关的信息提交到服务器
      if (
        usenameRegExp.test(this.usename) &&
        passwordRegExp.test(this.password)
      ) {
        this.$axios
          .post(
            "/login",
            "username=" + this.usename + "&password=" + this.password
          )
          .then((res) => {
            if (res.data.code == 1) {
              this.$toast("登录成功");
              sessionStorage.setItem("id", res.data.results[0].lid);
              sessionStorage.setItem("uname", res.data.results[0].uname);
              this.$store.commit("setId", res.data.results[0].uid);
              this.$store.commit("setUname", res.data.results[0].uname);

              // 登陆完跳转回请求登录的页面
              let redirect = this.$store.state.redirect;

              if (redirect == "jdgm") {
                // 清除vue-x的登录状态
                this.$store.commit("setGoto", "");
                // 跳转
                this.$router.go(-1);
              } else if (redirect == "lxgm") {
                // 清除vue-x的登录状态
                this.$store.commit("setGoto", "");
                // 跳转;
                this.$router.go(-1);
              } else if (redirect == "jdgm1") {
                // 清除vue-x的登录状态
                this.$store.commit("setGoto", "");
                // 跳转;
                this.$router.go(-3);
              } else if (redirect == "lxgm1") {
                // 清除vue-x的登录状态
                this.$store.commit("setGoto", "");
                // 跳转;
                this.$router.go(-3);
              } else {
                // 清除vue-x的登录状态
                this.$store.commit("setGoto", "");
                this.$router.push("/");
              }
            } else {
              this.$toast("登录失败");
            }
          });
      }
    },
  },
  mounted() {
    let uname = this.$route.query.usename;
    // console.log(uname);
    this.usename = uname;
  },
};
</script>

<style scoped>
.mint-header {
  background: #ffba33;
}
.mt-bt1 {
  background: #ffba33;
  width: 98%;
  margin: 3px auto;
}
.mt-bt2 {
  background: #ffba33;
  width: 98%;
  margin: 3px auto;
  /* border: 1px solid red; */
  color: red;
}
</style>
